<template>

  <div>

    <!--查询表单-->
    
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item>
        <el-input v-model="optimeQueryList.bz" placeholder="功能编号"/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getTimeListByCondition()">查询</el-button>
      <el-button type="default" @click="clear()">清空</el-button>
      <el-button type="danger" @click="showNewDialog()"  v-if="role=='admin'">新增</el-button>

  </el-form>

  

  <!--数据列表-->
    <el-table
    :data="TimeList"
    border
    style="width: 100%">
    <el-table-column
      prop="startTime"
      label="开始时间"
      width="180">
    </el-table-column>

    <el-table-column
       prop="endTime"
      label="结束时间"
      width="180">
    </el-table-column>

    <el-table-column
      prop="bz"
      label="功能编号"
      width="180">
    </el-table-column>

    <el-table-column
      prop="address"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type = "primary" size="mini" icon="el-icon-edit" @click ="showDialogAndDate(scope.row.id)"  v-if="role=='admin'">修改</el-button>
        <el-button type = "danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)"  v-if="role=='admin'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

 <!--新增弹窗-->
<el-dialog :visible.sync="SavedialogFormVisible" title="修改数据">
    <el-form :model="opTimeSave" label-width="120px">
         <div class="block">
            <span class="demonstration">开始时间</span>
            <el-date-picker
              v-model="opTimeSave.startTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
         </div>
        <div class="block">
            <span class="demonstration">结束时间</span>
            <el-date-picker
              v-model="opTimeSave.endTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
         </div>
      <el-form-item label="功能编号">
            <el-input v-model="opTimeSave.bz" />
        </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="SavedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
    </div>
</el-dialog>


  
 <!--修改弹窗-->
<el-dialog :visible.sync="dialogFormVisible" title="修改数据">
    <el-form :model="updateList" label-width="120px">
      
         <div class="block">
            <span class="demonstration">开始时间</span>
            <el-date-picker
              v-model="updateList.startTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
         </div>
        <div class="block">
            <span class="demonstration">结束时间</span>
            <el-date-picker
              v-model="updateList.endTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间">
            </el-date-picker>
         </div>   
         
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
    </div>
</el-dialog>

  </div>

</template>

<script>
import opTimeapi from '@/api/opTime.js'
import authapi from '@/api/Sauth.js'

  export default {
    data() {
      return {
       TimeList:null,
       optimeQueryList:{},
       BASE_API: process.env.BASE_API, // 接口API地址
       loading: false,
       importBtnDisabled: false, // 按钮是否禁用
       updateList:{},
       opTimeSave:{},
       dialogFormVisible: false,
       SavedialogFormVisible: false,
       role: {},//角色admin/user
      }
    },

    created(){
      this.getAllTimeList()
       this.getAuth()
    },

    methods:{
    
    //权限获取
    getAuth() {
      authapi.getRole().then(response => {
        this.role = response.data.role
      })
    },

    //新增一条按钮
      save(){
        opTimeapi.save(this.opTimeSave).then(response=>{
          this.$message({
              type: 'success',
              message: '新增成功!'
          })
           this.SavedialogFormVisible=false
           this.getAllTimeList()
        })
      
      },

    //显示新增弹窗
      showNewDialog(){
         this.SavedialogFormVisible=true
      },

    //修改按钮
      update(){
          opTimeapi.updateById(this.updateList).then(response=>{
            this.$message({
                type: 'success',
                message: '修改成功!'
            })
            this.dialogFormVisible=false
            this.getAllTimeList()
          })
      },


      showDialogAndDate(id){

        opTimeapi.getById(id).then(response=>{
          this.updateList = response.data.time
        })

        this.dialogFormVisible=true
      },


 
      clear(){
          this.bz = {}
          this.getAllTimeList()
      },



      getAllTimeList(){
        opTimeapi.getAllOpTime().then(response=>{
          this.TimeList = response.data.list
        })
      },

      getTimeListByCondition(){
         opTimeapi.getConditionOpTime(this.optimeList)
          .then(response=>{
              this.TimeList = response.data.list
              //清空查询条件
              //this.optimeQueryList = {}
          })
      
      },

  removeDataById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return opTimeapi.deleteById(id)
    }).then(() => {
        this.getAllTimeList()
        this.$message({
            type: 'success',
            message: '删除成功!'
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
    })
  },


  }


}
</script>